{% extends "base.html" %}

{% block title %}工单审批{% endblock %}

{% block head %}
{{ super() }}
<!-- DataTables -->
<link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
{% endblock %}

{% block content %}
<!-- 页面头 -->
<section class="content-header">
  <!--头部标题-->
  <h1>
    工单审批
    <!--    <small>advanced tables</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li class="active">工单审批</li>
  </ol>
</section>

<!-- 页面内容 -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">

      <div style="margin-bottom: 10px">
        <button type="button" class="btn btn-success" onclick="window.location.href='/job/type-1/add'"><i
          class="fa fa-plus"></i> 新建工单
        </button>
      </div>

      <!--表格1-->
      <div class="box">
        <div class="box-header">
          <!--          <h3 class="box-title">公共平台</h3>-->
        </div>
        <div class="box-body">
          <table id="example1" class="table  table-bordered " style="font-size: 90%;width:100%">
            <thead>
            <tr>
              <th>ID</th>
              <th>类型</th>
              <th>集群</th>
              <th>申请人</th>
              <th>申请时间</th>
              <th>说明</th>
              <th>审批人</th>
              <th>审批时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
            </thead>
          </table>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->

    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>
<!-- /.页面内容 -->
{% endblock %}


{% block script %}
<!-- DataTables -->
<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

<script>
    $(document).ready(function () {
        var table = $('#example1').DataTable({
            ajax: '/api/v1/job/all',
            columns: [
                {data: 'id'},
                {data: 'type'},
                {data: 'cluster'},
                {data: 'creator'},
                {data: 'create_time'},
                {data: 'comment'},
                {data: 'auditor'},
                {data: 'audit_time'},
                {data: 'state'},
                {
                    data: null,
                    fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html("<a href='/job/" + oData.id + "'>详情</a>");
                    }
                },
            ],
            order: [[0, 'desc']],
            processing: true,
            language: {
                "url": "/static/language.json"
            },
            lengthChange: true,
            scrollX: true,
            responsive: true,
            autoWidth: true,
            stateSave: false,
            columnDefs: [
                {
                    "targets": [],
                    "visible": false,
                }
            ],
        });


        // 根据URL的search参数，自动搜索
        let searchString = getQueryString('search')
        if (searchString !== '') {
            console.log(searchString)
            table.search(searchString);
            table.draw();
        }

        // 解决sidebar toogle之后，datatables标题行错位问题
        $('.sidebar-toggle').click(function () {
            $('.dataTables_scrollHeadInner').css('width', '100%');
            $('#example').css('width', '100%');
            setTimeout(function () {
                table.columns.adjust().draw();
            }, 400);
        });


    });


</script>
{% endblock%}